<template>
  <div style="position:relative">
    <ul v-bind="$attrs" :class="'ee-navi-group fc ' + (verticle ? 'verticle' : 'horizontal')">
      <slot></slot>
    </ul>
    <ee-placeholder v-if="placeholder"></ee-placeholder>
  </div>
</template>

<script type="text/javascript">
import parent from "../__mixin/relation/parent";
export default {
  name: "ee-navi-group",
  inheritAttrs: false,
  data() {
    return {
       //a: 1,
    }
  },
  mixins: [parent],
  props: {
    verticle: Boolean,
    placeholder: { type: Boolean, default: true },
  },
  // 计算属性，有依赖其它属性时，且其它属性没有发生变化，计算属性将不会重新计算而使用缓存
  computed: {
    // 仅读取
    //aDouble: function () { return this.a * 2 },
    // 读取和设置
    //aPlus: {
    //  get: function () { return this.a + 1 },
    //  set: function (v) { this.a = v - 1 }
    //}
  },
  methods: {
    //plus: function () { this.a++ },
  },
  watch: {
    //a: function (value, old) { },
  },
  mounted() {
  },
}
</script>

<style lang="scss" scoped>
.ee-navi-group {
  position: absolute;
  background-color: #545c64;
  transition: .3s;
}

.horizontal {
  width: 100%;
}

.verticle {
  height: 100vh;
  flex-direction: column;
}
</style>